{% extends 'base/base1.html' %}

{% block title %}修改头像{% endblock %}

{% block css %}
<style>
.upload-container {
    max-width: 500px;
    margin: 40px auto;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.upload-title {
    color: #2c3e50;
    margin-bottom: 30px;
    font-weight: 700;
}

.avatar-preview {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 4px solid #e9ecef;
    margin: 0 auto 30px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.avatar-preview:hover {
    border-color: #667eea;
    transform: scale(1.05);
}

.avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
    font-size: 1.2rem;
}

.avatar-preview:hover .upload-overlay {
    opacity: 1;
}

.file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-info {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 30px;
}

.btn-upload {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 15px;
}

.btn-upload:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.btn-back {
    background: #6c757d;
    color: white;
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-back:hover {
    background: #5a6268;
    text-decoration: none;
    color: white;
    transform: translateY(-2px);
}

.alert {
    background: #f8d7da;
    color: #721c24;
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0;
}
</style>
{% endblock %}

{% block js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const fileInput = document.getElementById('id_header');
    const previewImg = document.getElementById('previewImg');
    const uploadBtn = document.getElementById('uploadBtn');
    
    if (fileInput) {
        fileInput.addEventListener('change', function() {
            if (this.files && this.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    previewImg.src = e.target.result;
                };
                reader.readAsDataURL(this.files[0]);
                
                if (uploadBtn) {
                    uploadBtn.disabled = false;
                    uploadBtn.style.background = 'linear-gradient(135deg, #667eea, #764ba2)';
                }
            }
        });
    }
});
</script>
{% endblock %}

{% block main %}
<div class="upload-container">
    <h2 class="upload-title">修改头像</h2>
    
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        
        <div class="avatar-preview" onclick="document.getElementById('id_header').click();">
            {% if request.user.header %}
                <img src="{{ request.user.header.url }}" alt="当前头像" id="previewImg">
            {% else %}
                <img src="/media/head/head.png" alt="默认头像" id="previewImg">
            {% endif %}
            <div class="upload-overlay">
                <i class="fas fa-camera"></i> 点击选择
            </div>
        </div>
        
        <div style="display: none;">
            {{ form.header }}
        </div>
        
        <div class="upload-info">
            支持 JPG、PNG 格式，文件大小不超过 5MB
        </div>
        
        {% if form.header.errors %}
            {% for error in form.header.errors %}
                <div class="alert">{{ error }}</div>
            {% endfor %}
        {% endif %}
        
        <button type="submit" class="btn-upload" id="uploadBtn">
            <i class="fas fa-upload"></i> 上传头像
        </button>
        
        <a href="{% url 'user:center' %}" class="btn-back">
            <i class="fas fa-arrow-left"></i> 返回
        </a>
    </form>
</div>
{% endblock %}